<template>
	<view class="user">
		<!-- 用户 -->
		<view class="header" v-if="token">
			<image class="img" :src="userInfo.icon" @tap="goUpdateUserInfo"></image>
			<view class="right">
				<view class="name">{{ userInfo.nickname }}</view>
				<view class="num">用户名: {{ userInfo.username }}</view>
			</view>
		</view>
		<!-- 没有用户 -->
		<view class="none" v-else>
			<view class="noUser">
				<image class="img" src=""></image>
				<view class="right">
					<view class="name">Hi~</view>
					<view class="num">您还没有登陆呢</view>
				</view>
			</view>
			<!-- 未登录 -->
			<view class="noLogin">
				<view class="register" @tap="goRegister">注册</view>
				<view class="login" @tap="goLogin">登陆</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="order">
			<view class="title">我的订单</view>
			<view class="orderNavList">
				<view class="item" v-for="(item,index) in orderNavList" :key="item.name" @tap="goOrder(index,orderNavList)">
					<image class="img" :src="item.img"></image>
					<view class="name">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 底部列表 -->
		<view class="footerList">
			<view class="item" v-for="item in footerList" :key="item.name" @tap="goNext(item.name)">
				<image class="img" :src="item.img"></image>
				<view class="name">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMemberInfo } from "../../api/user/index.js";
	import mix from '@/mixins/index.js';
	export default {
		mixins:[mix],
		data() {
			return {
				userInfo: {}, // 用户
				token:'', // 用户 - 切换
				orderNavList: [{
						img: '../../static/icons/icon-pay.png',
						name: '待付款'
					},
					{
						img: '../../static/icons/pay-done.png',
						name: '已付款'
					},
					{
						img: '../../static/icons/icon-car.png',
						name: '已发货'
					},
					{
						img: '../../static/icons/icon-done.png',
						name: '已收货'
					},
					{
						img: '../../static/icons/icon-back.png',
						name: '售后'
					}
				], // 我的订单 - 列表
				footerList: [{
						img: '../../static/icons/save.png',
						name: '商品收藏'
					},
					{
						img: '../../static/icons/brand.png',
						name: '品牌'
					},
					{
						img: '../../static/icons/article.png',
						name: '文章收藏'
					},
					{
						img: '../../static/icons/address.png',
						name: '地址'
					},
					{
						img: '../../static/icons/card.png',
						name: '卡包'
					},
					{
						img: '../../static/icons/cart2.png',
						name: '购物车'
					},
					{
						img: '../../static/icons/tel.png',
						name: '联系客服'
					}
				], // 底部 - 列表
			};
		},
		onShow() {
			// 判断 - 是否登录
			if(this.checkLogin()){
				// 用户 - 切换
				this.token = uni.getStorageSync("token");
				// 用户信息 - 获取
				getMemberInfo().then(res=>{
					this.userInfo = res.data.data.userInfo
				})
			}
		},
		methods:{
			// 跳转 - 更新用户信息
			goUpdateUserInfo(){
				uni.setStorageSync("userInfo",this.userInfo)
				uni.navigateTo({
					url: "./updateUserInfo/updateUserInfo"
				})
			},
			// 跳转 - 订单
			goOrder(val,val2){
				// 本地存储 - 订单导航列表
				uni.setStorageSync("orderNavList",val2)
				uni.navigateTo({
					url: `../order/order?type=${val}`
				})
			},
			// 跳转 - 登陆
			goLogin(){
				uni.navigateTo({
					url:'./login/login'
				})
			},
			// 跳转 - 注册
			goRegister(){
				uni.navigateTo({
					url:'./register/register'
				})
			},
			goNext(val){
				// 跳转 - 商品收藏
				if(val == '商品收藏'){
					uni.navigateTo({
						url: './collected/collected'
					})
				};
				// 跳转 - 文章收藏
				if(val == '文章收藏'){
					uni.navigateTo({
						url: './articleList/articleList'
					})
				};
				// 暂未开通 - 品牌
				if(val == '品牌'){
					uni.showToast({
						title: "品牌功能暂未开通！",
						image: "/static/icons/sorry.png"
					})
				};
				// 暂未开通 - 卡包
				if(val == '卡包'){
					uni.showToast({
						title: "卡包功能暂未开通！",
						image: "/static/icons/sorry.png"
					})
				};
				// 跳转 - 卡包
				if(val == '地址'){
					uni.navigateTo({
						url: "./address/address"
					})
				};
				// 跳转 - 购物车
				if(val == '购物车'){
					uni.navigateTo({
						url: "./car/car"
					})
				};
				// 拨打电话 - 联系客服
				if(val == '联系客服'){
					uni.makePhoneCall({
						phoneNumber: "12345678999"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>
